<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <title>登录</title>
    <jsp:include page="common.jsp"></jsp:include>
</head>
<body>
<div class="bg"></div>
<div class="container">
    <div class="line bouncein">
        <div class="xs6 xm4 xs3-move xm4-move">
            <div style="height:150px;"></div>
            <div class="media media-y margin-big-bottom">
            </div>
            <form id="registerForm" action="#" method="post" onsubmit="return false;">
                <div class="panel loginbox">
                    <div class="text-center margin-big padding-big-top"><h1>后台管理中心</h1></div>
                    <div class="panel-body" style="padding:30px; padding-bottom:10px; padding-top:10px;">
                        <div class="form-group">
                            <div class="field field-icon-right">
                                <input type="text" class="input input-big checkInfo" colum="admin_username"
                                       checkMsg="账号已经存在" name="name" placeholder="输入账号"
                                       data-validate="required:请填写账号" />
                                <span class="icon icon-user margin-small"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="field field-icon-right">
                                <input type="password" class="input input-big" name="enpassword" placeholder="输入密码"
                                       data-validate="required:请填写密码"/>
                                <span class="icon icon-key margin-small"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="field field-icon-right">
                                <input type="password" class="input input-big" name="repassword" placeholder="确认密码"
                                       data-validate="required:请确认密码"/>
                                <span class="icon icon-key margin-small"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="field field-icon-right">
                                <input type="text" class="input input-big checkInfo" colum="admin_email"
                                       checkMsg="邮箱已经存在" name="email" placeholder="输入邮箱"
                                       data-validate="required:请填写邮箱"/>
                                <span class="icon icon-user margin-small"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="field field-icon-right">
                                <input type="text" class="input input-big checkInfo" colum="admin_phone"
                                       checkMsg="手机号已经存在" name="phone" placeholder="输入手机号"
                                       data-validate="required:请填写手机号"/>
                                <span class="icon icon-user margin-small"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="field field-icon-right">
                                <input type="text" class="input input-big checkInfo" colum="admin_nickname"
                                       checkMsg="昵称已经存在" name="nickname" placeholder="输入昵称"
                                       data-validate="required:请填写昵称"/>
                                <span class="icon icon-user margin-small"></span>
                            </div>
                        </div>
                    </div>

                    <div style="padding:30px;"><input type="submit" id="registerBtn"
                                                      class="button button-block bg-main text-big input-big" value="注册">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<%--显示提示信息--%>
<div id="showMsg"></div>
<script>
   //检查用户名是否存在
    /*function checkUsername(my) {
        var y = $(my).val().trim();//获取输入框的值
        $.post("{ctx}/manage/check.do", {"name": y, "key": "admin_username"}, function (data) {
            if (data.state == 0) {
                var span = $("#showMsg");
                span.html("")
            } else {
                //alert(data.msg);
                var span = $("#showMsg");
                span.html("用户名被占用")
                $(my).focus();//获得焦点
            }
        }, "json")

    }*/

    $(".checkInfo").blur(function () {
        var msg = $(this).attr("checkMsg");
        var key = $(this).attr("colum");
        var v = $(this).val();
        $.post("${ctx}/manage/check.do", {"name": v, "key": key}, function (data) {
            if (data.state == 0) {
                $("#showMsg").html("")
                $("#showMsg").fadeOut();
            } else {
                //alert(data.msg);
               $("#showMsg").html(msg);
               $("#showMsg").fadeIn();

                $(this).focus();//获得焦点
            }
        }, "json")
    })

    $("#registerBtn").click(function () {
        //获取输入框  的name属性为name  的值
        /*var name=$("input[name='name']").val();
        var password=$("input[name='password']").val();
        var code=$("input[name='code']").val();*/
        //表单序列化 将表单中所有数据按照name属性为key, value位置
        //打包为json格式
        var mydata = $("#registerForm").serialize();
        $.post("${ctx}/manage/register.do", mydata, function (data) {
            if (data.state == 0) {//登录成功
                window.location.href = "${ctx}/manage/index.do";
            } else {
                alert(data.msg)
            }
        }, "json")

    })
</script>
<style>
    #showMsg{
        position: fixed;
        top:0px;
        left: 0px;
        width: 100%;
        background: rgba(255,0,0,0.25);
        color: white;
        font-size: 24px;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        z-index: 9999;
        font-weight: 700;
        display: none;
    }
</style>
</body>
</html>